<template>
  <div class="departments-container">
    <el-card class="box-card">
      <!-- 标题 -->
      <tree-tools :tool-node="defaultObj" :isRoot='false'></tree-tools>

      <!-- 内容 -->
      <el-tree 
      style="margin:20px 0"
      :data="departs" 
      :props="defaultProps" 
      @node-click="handleNodeClick">
        
        <!-- 属性控件 -->
          <tree-tools slot-scope="{ data }" :tool-node="data"></tree-tools>
      </el-tree>
    </el-card>
  </div>
</template>

<script>
import treeTools from "./components/tree-tools";
// 导入获取数据的接口
import { departmentApi } from "@/api/department";

export default {
  components: {
    treeTools
  },
  // 传值
  data() {
    return {
      defaultObj: {
        name: "江苏传智播客教育科技股份有限公司"
        
      },
      // 列表数据
      departs: [
        {
          name: "总裁办",
          manager: "曹操",
          children: [{ name: "董事会", manager: "曹丕" }]
        },
        { name: "行政部", manager: "刘备" },
        { name: "人事部", manager: "孙权" }
      ],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  created() {
    // 调用获取的数据渲染
   this.getList()
  },
  methods: {
    handleNodeClick() {
      console.log(data);
    },
    // 获取列表数据
   async getList() {
      const res = await departmentApi();
      console.log(res);
      this.departs = res.depts;
    }
  }
 };
</script>
<style lang="scss" scoped>
.departments-container {
  .box-card {
    padding: 80px;
  }
}
</style>